<template>
  <view class="my-nav" @click="handleClick()">
    <view class="image-box">
      <view class="image" :style="{width: wh +'rpx',height: wh + 'rpx'}">
        <image :src="url"></image>
      </view>
    </view>
    <view class="title">
      {{title}}
    </view>
    <uni-icons type="right" size="20" color="#888"></uni-icons>
  </view>
</template>
<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    props: {
      title: String,
      url: String,
      wh: {
        type: Number,
        default: 50
      }
    },
    methods: {
      ...mapMutations('my_user',['updateToken']),
      handleClick() {
        if (this.title == '积分商城') {
          uni.navigateTo({
            url: '/subpkg/integralShop/integralShop'
          })
        } else if (this.title == '每日答题') {
          uni.navigateTo({
            url: '/subpkg/questions/questions'
          })
        } else if (this.title == '我的收藏') {
          uni.navigateTo({
            url: '/subpkg/collect/collect'
          })
        } else if (this.title == '我的地址') {
          uni.navigateTo({
            url: '/subpkg/address/address'
          })
        } else if (this.title == '我发布的') {
          uni.navigateTo({
            url: '/subpkg/myPostList/myPostList'
          })
        } else if (this.title == '积分明细') {
          uni.navigateTo({
            url: '/subpkg/integralDetail/integralDetail'
          })
        } else if (this.title == '退出登录') {
          this.out()
        }
      },
      out() {
        let that = this
        uni.showModal({
          content: '您确定退出登录吗？',
          confirmColor: '#c00000',
          success: function(res) {
            if (res.confirm) {
              that.okOut()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      async okOut() {
        await uni.$http.post('/users/users/logout')
        this.updateToken('')
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    },
    computed:{
      ...mapState('my_user',['token'])
    }
  }
</script>
<style lang="scss">
  .my-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 110rpx;
    border-bottom: 1rpx solid #eee;
    padding: 0 20rpx;
    font-size: 40rpx;
    box-sizing: border-box;

    .title {
      margin-right: 350rpx;
      font-size: 32rpx;
      color: #888;
    }

    .image-box {
      position: relative;
      width: 70rpx;
      height: 70rpx;
      box-sizing: border-box;

      .image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60rpx;
        height: 60rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>